<template>
    <div class="flrc">
        <div class="flex1">
            <div class="flrc">
                <div class="tar" style="width: 50px;">选择：</div>
                <div>
                    <mu-text-field style="width: 300px;" ref="search"
                                   @focus="onFocus"
                                   @keypress.enter="search" v-model="searchKey"
                                   :action-click="search" placeholder="名称/编码/参数" action-icon="search" solo></mu-text-field>
                    <mu-popover placement="bottom-start" :open.sync="skuChoiceOpen" :trigger="trigger">
                        <div>
                            <div class="pos-r pad5" @click="selectThis(index)" v-for="(choice,index) in choices" :key="index">
                                <mu-ripple>{{choice.label}}</mu-ripple>
                            </div>
                        </div>
                    </mu-popover>
                </div>
                <div>
                    <mu-button @click="clear" round small>清空</mu-button>
                </div>
                <div class="flex1 ">
                    <mu-chip delete @delete="clear" color="primary" v-if="!!this.showName">{{this.showName}}</mu-chip>
                </div>
            </div>
        </div>
<!--        <div style="width: 80px;">相关物资：</div>-->
<!--        <div class="">-->
<!--            <mu-select v-model="itemId" style="width: 100px;" solo placeholder="选择">-->
<!--                <mu-option v-for="(choice,index) in items" :key="index" :label="choice.label" :value="choice.value"></mu-option>-->
<!--            </mu-select>-->
<!--        </div>-->
<!--        <template v-for="attr in itemAttributes">-->
<!--            <div style="min-width: 50px;" :key="`lable_${attr.id}`">{{attr.name}}</div>-->
<!--            <div :key="`choice_${attr.id}`">-->
<!--                <mu-select v-model="attr.selected" no-data-text="" style="width: 100px;" solo placeholder="选择">-->
<!--                    <mu-option v-for="(choice,index) in attr.values" :key="index" :label="choice.label" :value="choice.value"></mu-option>-->
<!--                </mu-select>-->
<!--            </div>-->
<!--        </template>-->
<!--        <div class="" style="width: 200px;">-->
<!--            <mu-button @click="useSelectItem" small color="primary">使用此物资</mu-button>-->
<!--        </div>-->
    </div>
</template>

<script>
    export default {
        props: {
            value: {},
            config: {
                default() {
                    return {
                        "label": "物品",
                        "key": "item",
                        "type": "EzSearch",
                        "span": 24,
                        "placeholder": "请输入",
                        "sn": 3392972946,
                        "api": "/wms/admin/ItemSku/choice",
                        field: "text,code"
                    }
                }
            },
            param: {},
            name:{
                default() {
                    return ""
                }
            },
        },
        name: "EzItemPicker",
        data() {
            return {
                trigger:null,
                skuChoiceOpen:false,
                inSideValue: "",
                choices: [],
                params: undefined,
                loading: false,
                showName: null,
                query: {
                    limit: 10,
                    page: 1,
                    total: 0,
                },
                searchKey: "",

                //物品选择
                itemId: "",
                itemKey: "",
                items: [],
                itemAttributes: [],
                itemAttributesValue: [],
            }
        },
        methods: {
            onFocus(e){
                this.skuChoiceOpen = true
                e.target.select()
            },
            prev() {
                this.params.page = this.query.page - 1
                this.search(this.searchKey)
            },
            next() {
                this.params.page = this.query.page + 1
                this.search(this.searchKey)
            },
            clear() {
                this.inSideValue = null
                this.showName = null
                this.searchKey = ""
                this.choices = []
            },
            selectThis(index) {
                let item = this.choices[index]
                this.showName = item.label
                this.inSideValue = item.value
                this.searchKey = item.label
                console.log(index)
                //根据选择的字段获取物品名
                // let itemName = item.label.split(":")[0]
                // this.itemKey = itemName
                // this.getItem(itemName)

            },
            change() {
                if (this.searchKey !== "") {
                    this.search(this.searchKey)
                    // this.getItem(this.searchKey)
                }
            },
            search() {
                this.skuChoiceOpen = true
                let query =this.searchKey
                if (query !== "") {
                    this.params = {
                        _where: {
                            _or:[
                                {text__regex:query},
                                {code__regex:query},
                            ],
                        },
                        limit: this.query.limit,
                        page: this.query.page,
                    }
                    if (this.config.api !== "") {
                        let url = this.config.api
                        if (this.config.api.indexOf('/') === -1) url = `/admin/${this.config.api}/choice?fields=name&label=key&value=value`
                        this.loading = true
                        this.$http.post(url, this.params, res => {
                            this.choices = res.data.lists
                            this.loading = false
                            this.query = res.data.query
                            if (this.choices.length === 1) {
                                let item = this.choices[0]
                                this.showName = item.label
                                this.inSideValue = item.value
                                this.searchKey = item.label
                                // this.selectThis(0)
                            }
                        })
                    }
                } else {
                    this.choices = [];
                }
            },
            getInitData() {
                let url = this.config.api
                if (this.config.api.indexOf('/') === -1) url = `/admin/${this.config.api}/choice?fields=name&label=key&value=value`
                this.loading = true
                this.$http.post(url, {
                    _where: {id: this.inSideValue}
                }, res => {
                    if (res.data.lists.length === 1) {
                        this.showName = res.data.lists[0].label
                    }
                })
            },


            getItem(q) {
                this.$http.post("/wms/admin/ItemBase/list",
                    {_where: {"name__regex": q}},
                    res => {
                        if (res.data.lists.length > 0) {
                            this.items = []
                            this.itemId = 0
                            for (let cur of res.data.lists) {
                                if (this.itemId === 0) this.itemId = cur.id
                                this.items.push({value: cur.id, label: cur.name})
                            }
                        }
                    })
            },
            useSelectItem() {
                let search = this.itemId + "."
                for (let attr of this.itemAttributes) {
                    search+=attr.selected
                }
                this.searchKey = search
                this.search()

            },
            createItemAttributeValues(value){
                //[01][材质01][02][材质02]
                let tmp = value.slice(1,-1)
                let tmpArr = tmp.split("][")
                let values = []
                for (let i = 0; i < tmpArr.length/2; i++) {
                    values.push({
                        label:tmpArr[i*2+1],
                        value:tmpArr[i*2],
                    })
                }
                return values
            }
        },
        mounted() {
            this.inSideValue = this.value
            this.trigger = this.$refs.search.$el
            this.params = this.param
            this.getInitData()
        },
        watch: {
            inSideValue(val) {
                this.$emit("input", val)
                this.$emit("update:name", this.showName)
            },
            itemId(v) {
                //ItemId 变动时 获取可用参数
                let _this =  this
                if (v > 0) {
                    this.$http.post("/wms/admin/ItemAttribute/list", {
                        _where: {itemBaseId: v},
                        _order: ["sort"]
                    }, res => {
                        console.log(res.data.lists)
                        this.itemAttributes = []
                        for (let attr of res.data.lists) {
                            let values = _this.createItemAttributeValues(attr.values)
                            this.itemAttributes.push({
                                id: attr.id,
                                name: attr.name,
                                selected:values[0].value,
                                values: values
                            })
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>